const Star = Vue.defineComponent({
	props: { //接受父组件的参数属性
		title: String,
		star: Number
	},
	data() {
		return {
			hoverIdx: this.star || 0,
			rate: this.star || 0,
			text: ['', '非常不满意', '不满意', '一般', '满意', '非常满意'],
		}
	},
	watch:{
		rate(val) {
			// 触发父组件的自定义事件
			this.$emit('update:rate',val)
		}
	},
	template: `
			<ul class="star">
				<li>{{title}}</li>
				<li v-for='i in 5' @mouseenter="hoverIdx=i" @mouseleave="hoverIdx=rate"
						@click="rate=i">
					<img v-if='i<=hoverIdx' src="img/star.png" alt="">
					<img v-else src="img/star-off.png" alt="">
				</li>
				<li>{{text[rate]}}</li>
			</ul>
		`
})